<template>
  <div class="box">
      <input type="text" placeholder="搜索商品、品牌"/>
      <i class="iconfont icon-search"></i>
  </div>
</template>

<script>
export default {
    name:"Search",
    data:function(){
        return {

        }
    }
}
</script>

<style scoped>
@import url(../../assets/fontq/iconfont);
.box{
    width:95%;
    height: 35px;
    margin: 10px auto;
    position: relative;
    /* border:1px solid black; */
}

.box input{
    width: 100%;
    height: 35px;
    border-radius: 10px;
    outline: none;
    border:1px solid #ccc;
    text-indent: 50px;
    font-size: 15px;
    color: #ccc;
    background-color: rgb(243, 240, 240)
}

.box i{
    position: absolute;
    left:10px;
    top:50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 25px;
}
.icon-search{
   color: #ccc;
}
</style>